<template>
  <div class="club-member-container">
    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="成员姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入成员姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="所属俱乐部">
          <el-select
            v-model="searchForm.clubId"
            placeholder="选择俱乐部"
            clearable
            style="width: 200px"
          >
            <el-option label="全部" value="" />
            <el-option label="篮球俱乐部" value="1" />
            <el-option label="足球俱乐部" value="2" />
            <el-option label="羽毛球俱乐部" value="3" />
          </el-select>
        </el-form-item>

        <el-form-item label="成员角色">
          <el-select
            v-model="searchForm.role"
            placeholder="选择角色"
            clearable
            style="width: 150px"
          >
            <el-option label="全部" value="" />
            <el-option label="会长" value="president" />
            <el-option label="副会长" value="vice_president" />
            <el-option label="普通成员" value="member" />
          </el-select>
        </el-form-item>

        <el-form-item label="成员状态">
          <el-select
            v-model="searchForm.status"
            placeholder="选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="正常" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <IconifyIconOffline icon="ep:search" class="mr-1" />
            搜索
          </el-button>
          <el-button @click="handleReset">
            <IconifyIconOffline icon="ep:refresh" class="mr-1" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-bar">
        <div class="action-left">
          <el-button type="primary" @click="handleAdd">
            <IconifyIconOffline icon="ep:plus" class="mr-1" />
            添加成员
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedMembers.length === 0"
            @click="handleBatchRemove"
          >
            <IconifyIconOffline icon="ep:delete" class="mr-1" />
            批量移除
          </el-button>
          <el-button type="success" @click="handleExport">
            <IconifyIconOffline icon="ep:download" class="mr-1" />
            导出成员
          </el-button>
        </div>

        <div class="action-right">
          <el-button circle @click="handleRefresh">
            <IconifyIconOffline icon="ep:refresh" />
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 成员列表 -->
    <el-card class="table-card" shadow="never">
      <el-table
        v-loading="loading"
        :data="memberList"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="avatar" label="头像" width="80">
          <template #default="{ row }">
            <el-avatar :size="40" :src="row.avatar">
              <IconifyIconOffline icon="ep:user" />
            </el-avatar>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="120" />

        <el-table-column prop="phone" label="联系电话" width="140" />

        <el-table-column prop="club" label="所属俱乐部" width="150">
          <template #default="{ row }">
            <el-tag type="primary" size="small">
              {{ row.club.name }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="role" label="成员角色" width="120">
          <template #default="{ row }">
            <el-tag :type="getRoleColor(row.role)" size="small">
              {{ getRoleText(row.role) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="joinTime" label="加入时间" width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.joinTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleView(row)"
            >
              查看
            </el-button>
            <el-button
              type="warning"
              link
              size="small"
              @click="handleChangeRole(row)"
            >
              变更角色
            </el-button>
            <el-button
              type="danger"
              link
              size="small"
              @click="handleRemove(row)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 成员详情弹窗 -->
    <el-dialog v-model="detailVisible" title="成员详情" width="600px">
      <div v-if="currentMember" class="member-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="头像">
            <el-avatar :size="60" :src="currentMember.avatar">
              <IconifyIconOffline icon="ep:user" />
            </el-avatar>
          </el-descriptions-item>
          <el-descriptions-item label="姓名">{{
            currentMember.name
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            currentMember.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            currentMember.email
          }}</el-descriptions-item>
          <el-descriptions-item label="所属俱乐部">{{
            currentMember.club.name
          }}</el-descriptions-item>
          <el-descriptions-item label="成员角色">
            <el-tag :type="getRoleColor(currentMember.role)" size="small">
              {{ getRoleText(currentMember.role) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="加入时间">{{
            formatDateTime(currentMember.joinTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusColor(currentMember.status)" size="small">
              {{ getStatusText(currentMember.status) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 变更角色弹窗 -->
    <el-dialog v-model="roleVisible" title="变更成员角色" width="400px">
      <div v-if="currentMember" class="role-form">
        <el-form :model="roleForm" label-width="100px">
          <el-form-item label="成员姓名">
            <el-input v-model="currentMember.name" disabled />
          </el-form-item>

          <el-form-item label="当前角色">
            <el-tag :type="getRoleColor(currentMember.role)" size="small">
              {{ getRoleText(currentMember.role) }}
            </el-tag>
          </el-form-item>

          <el-form-item label="新角色">
            <el-select
              v-model="roleForm.newRole"
              placeholder="选择新角色"
              style="width: 100%"
            >
              <el-option label="会长" value="president" />
              <el-option label="副会长" value="vice_president" />
              <el-option label="普通成员" value="member" />
            </el-select>
          </el-form-item>

          <el-form-item label="变更原因">
            <el-input
              v-model="roleForm.reason"
              type="textarea"
              :rows="3"
              placeholder="请输入变更原因"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="roleVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRole">确认变更</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { IconifyIconOffline } from "@/components/ReIcon";
import dayjs from "dayjs";

// 搜索表单
const searchForm = reactive({
  name: "",
  clubId: "",
  role: "",
  status: ""
});

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
});

// 状态
const loading = ref(false);
const selectedMembers = ref([]);
const detailVisible = ref(false);
const roleVisible = ref(false);
const currentMember = ref(null);

// 角色变更表单
const roleForm = reactive({
  newRole: "",
  reason: ""
});

// 成员列表数据
const memberList = ref([
  {
    id: 1,
    name: "张三",
    phone: "13800138001",
    email: "zhangsan@example.com",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=male%20user%20avatar&image_size=square",
    club: {
      id: 1,
      name: "篮球俱乐部"
    },
    role: "president",
    joinTime: "2024-01-15 10:30:00",
    status: "active"
  },
  {
    id: 2,
    name: "李四",
    phone: "13800138002",
    email: "lisi@example.com",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=female%20user%20avatar&image_size=square",
    club: {
      id: 2,
      name: "足球俱乐部"
    },
    role: "vice_president",
    joinTime: "2024-01-14 14:20:00",
    status: "active"
  },
  {
    id: 3,
    name: "王五",
    phone: "13800138003",
    email: "wangwu@example.com",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=young%20user%20avatar&image_size=square",
    club: {
      id: 3,
      name: "羽毛球俱乐部"
    },
    role: "member",
    joinTime: "2024-01-13 16:45:00",
    status: "inactive"
  }
]);

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm");
};

// 获取角色文本
const getRoleText = (role: string) => {
  const roleMap: Record<string, string> = {
    president: "会长",
    vice_president: "副会长",
    member: "普通成员"
  };
  return roleMap[role] || role;
};

// 获取角色颜色
const getRoleColor = (role: string) => {
  const colorMap: Record<string, string> = {
    president: "danger",
    vice_president: "warning",
    member: "success"
  };
  return colorMap[role] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    active: "正常",
    inactive: "禁用"
  };
  return statusMap[status] || status;
};

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    active: "success",
    inactive: "danger"
  };
  return colorMap[status] || "info";
};

// 搜索
const handleSearch = () => {
  pagination.page = 1;
  loadMemberList();
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    name: "",
    clubId: "",
    role: "",
    status: ""
  });
  handleSearch();
};

// 添加成员
const handleAdd = () => {
  ElMessage.info("添加成员功能开发中");
};

// 批量移除
const handleBatchRemove = () => {
  ElMessage.info("批量移除功能开发中");
};

// 导出成员
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 刷新
const handleRefresh = () => {
  loadMemberList();
};

// 选择变化
const handleSelectionChange = (selection: any[]) => {
  selectedMembers.value = selection;
};

// 查看成员
const handleView = (member: any) => {
  currentMember.value = member;
  detailVisible.value = true;
};

// 变更角色
const handleChangeRole = (member: any) => {
  currentMember.value = member;
  roleForm.newRole = "";
  roleForm.reason = "";
  roleVisible.value = true;
};

// 移除成员
const handleRemove = async (member: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要移除成员 "${member.name}" 吗？`,
      "确认移除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    ElMessage.success("成员已移除");
    loadMemberList();
  } catch {
    // 用户取消
  }
};

// 提交角色变更
const handleSubmitRole = () => {
  if (!roleForm.newRole) {
    ElMessage.warning("请选择新角色");
    return;
  }

  if (currentMember.value) {
    currentMember.value.role = roleForm.newRole;
  }

  ElMessage.success("角色变更成功");
  roleVisible.value = false;
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  loadMemberList();
};

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.page = page;
  loadMemberList();
};

// 加载成员列表
const loadMemberList = async () => {
  loading.value = true;
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500));
    pagination.total = 100;
  } catch (error) {
    ElMessage.error("加载成员列表失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadMemberList();
});
</script>

<style scoped lang="scss">
.club-member-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card,
.action-card,
.table-card {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.search-form {
  .el-form-item {
    margin-bottom: 16px;
  }
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .action-left {
    display: flex;
    gap: 8px;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.member-detail {
  .el-descriptions {
    margin-bottom: 20px;
  }
}

.role-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .club-member-container {
    padding: 10px;
  }

  .search-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 12px;

      .el-input,
      .el-select {
        width: 100% !important;
      }
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left {
      flex-wrap: wrap;
    }

    .action-right {
      align-self: flex-end;
    }
  }
}
</style>
